<template>
  <Dialog title="会员等级详情" v-model="dialogVisible" width="800">
    <el-descriptions :column="2" border v-loading="loading">
      <el-descriptions-item label="编号">
        {{ detailData.id }}
      </el-descriptions-item>
      <el-descriptions-item label="等级名称">
        {{ detailData.name }}
      </el-descriptions-item>
      <el-descriptions-item label="等级">
        {{ detailData.level }}
      </el-descriptions-item>
      <el-descriptions-item label="定价">
        {{ detailData.pricing ? `¥${detailData.pricing}` : '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="等级图标">
        <el-image
          v-if="detailData.icon"
          :src="detailData.icon"
          class="h-60px w-60px"
          :preview-src-list="[detailData.icon]"
        />
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="等级背景图">
        <el-image
          v-if="detailData.backgroundUrl"
          :src="detailData.backgroundUrl"
          class="h-60px w-60px"
          :preview-src-list="[detailData.backgroundUrl]"
        />
        <span v-else>-</span>
      </el-descriptions-item>
      <el-descriptions-item label="会员权益" :span="2">
        <el-tag v-for="(benefitName, index) in detailData.benefitNames" :key="index" class="mr-5px">
          {{ benefitName }}
        </el-tag>
        <span v-if="!detailData.benefitNames || detailData.benefitNames.length === 0">-</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="detailData.status" />
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formatDate(detailData.createTime) }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as LevelApi from '@/api/member/level'

/** 会员等级详情 **/
defineOptions({ name: 'MemberLevelDetail' })

const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(false) // 详情的加载中
const detailData = ref({
  id: undefined,
  name: undefined,
  level: undefined,
  pricing: undefined,
  icon: undefined,
  backgroundUrl: undefined,
  benefitNames: [],
  status: undefined,
  createTime: undefined
})

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true
  loading.value = true
  try {
    detailData.value = await LevelApi.getLevel(id)
  } finally {
    loading.value = false
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
